<template>
  <div style="padding-bottom:120px;">
    <van-nav-bar title="订单中心"
                 left-text="返回"
                 left-arrow
                 @click-left="onClickLeft" />
    <select-address></select-address>
    <div class="shop"
         v-for="(item,index) in info"
         :key="index">
      <div class="shop_title">
        <img :src="item.shop[0].image">
        <span>{{item.shop[0].shop_name}}</span>
      </div>
      <div class="order_list">
        <div class="order_one"
             v-for="(orderItem,index) in item.shop"
             :key="index">
          <img :src="orderItem.image">
          <div>
            <p>{{orderItem.goods_name}}</p>
            <div>￥{{orderItem.price}}</div>
          </div>
        </div>
      </div>
    </div>
    <!--  总价部分 -->
    <div class="total">
      <van-cell title="商品金额"
                is-link
                value="88" />
      <van-cell title="运费"
                is-link
                :value="count_freight" />
      <van-cell title="总计"
                is-link
                :value="count_price"
                class="mytotal" />
    </div>
    <div class="btn_wrap">
      <van-button round
                  block
                  type="info">货到付款</van-button>
      <van-button round
                  block
                  type="primary"
                  @click="turnPay">在线支付</van-button>
    </div>
  </div>

</template>
<script>
import { getOrderApi } from '../../api/order'
import selectAddress from './selectAddress'
import { mapGetters, mapActions } from 'vuex';
export default {
  components: { selectAddress },
  data () {
    return {
      ids: [],
      info: [],
      count_freight: 0,
      count_price: 0
    }
  },
  computed: {
    ...mapGetters("addressStore", ["defAddress"])
  },
  created () {
    this.ids = this.$route.query.ids; //购物车id
    console.log(this.ids)
    getOrderApi(this.ids, this.defAddress.id).then(res => {
      console.log(res)
      this.info = res.data.info;
      this.count_freight = res.data.count_freight;
      this.count_price = res.data.count_price
    })
  },
  methods: {
    ...mapActions("addressStore", ["getAddressAction"]),
    onClickLeft () {

    },
    turnPay () {  //选择支付页面
      this.$router.push({ name: "choosepay", params: { ids: this.ids, price: this.count_price } })
    }
  }
}
</script>
<style lang="less">
.shop {
  width: 100%;
  .shop_title {
    display: flex;
    padding: 0 30px;
    box-sizing: border-box;
    // line-height: 100px;
    line-height: 80px;
    img {
      width: 60px;
      height: 60px;
      vertical-align: middle;
    }
  }
  .order_list {
    .order_one {
      height: 200px;
      display: flex;
      align-items: center;
      background: white;
      margin: 10px 0;
      img {
        width: 150px;
        height: 150px;
        margin: 0 30px;
      }
      div {
        font-size: 25px;
        p {
          height: 100px;
          line-height: 50px;
          overflow: hidden;
          text-overflow: ellipsis;
          line-clamp: 2;
          display: -webkit-box;
          -webkit-box-orient: vertical;
        }
        div {
          color: red;
        }
      }
    }
  }
}
.total {
  margin-top: 20px;
  .mytotal {
    .van-cell__value {
      span {
        color: red;
      }
    }
  }
}
.btn_wrap {
  width: 70%;
  margin: 0 auto;
  .van-button {
    margin-top: 20px;
  }
}
</style>